<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="../EXT4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="../css/style.css" />
<script type="text/javascript" src="../EXT4/ext-all.js"></script>
<script type="text/javascript" src="../script/ext-lang-zh_CN.js"></script>
<script type="text/javascript">

function radioCheck(value,rowindex,store){
	if(value==1){
		Ext.getDom('radio_1_'+rowindex).checked='checked';
		Ext.getDom('radio_2_'+rowindex).checked='';
	}else{
		Ext.getDom('radio_2_'+rowindex).checked='checked';
		Ext.getDom('radio_1_'+rowindex).checked='';
	}
}

Ext.onReady(function() {

	Ext.Loader.setConfig({
    	enabled: true
	});
	
	Ext.QuickTips.init();
	
	Ext.define('Role', { 
        extend: 'Ext.data.Model', 
        fields: ['id','roleName'] 
    });
    
    Ext.define('Service', { 
        extend: 'Ext.data.Model',
        fields: ['rsid','serviceId','roleId','managerName','serviceText','permission'],
    });
	
	var role_store = Ext.create('Ext.data.Store', {
		model: 'Role', 
        autoLoad: true,
        pageSize: 10,
        proxy: { 
            type: 'ajax', 
            url: '../service/role_allrole',
            reader: { 
                type: 'json', 
                root: 'root'
            }
        }
	});
	
	var service_store = Ext.create('Ext.data.Store', {
		model: 'Service', 
        autoLoad: true,
        pageSize: 10,
        proxy: { 
            type: 'ajax', 
            url: '../service/service1_allservice',
            reader: { 
                type: 'json', 
                root: 'root'
            }
        }
	});
	
	var m_role = Ext.create('Ext.selection.CheckboxModel',{
		checkOnly:false,
		mode:'SINGLE',
		showHeaderCheckbox: false,
		listeners: { 
			'selectionchange':function(view,selected){
				service_store.load({
						params: {roleid: selected[0].data.id}
				});
			}
		}
	});
	
	var main_panel = Ext.create('Ext.Panel', {
	    border: 0,
	    region: 'center',
	    layout: {
	        type: 'hbox',
	        align: 'stretch'
	    },
	    items: [{
	        xtype: 'grid',
	        selModel: m_role,
	        valueField: 'id',
	        columns:[{ 
	        	text: '角色名',  dataIndex: 'roleName'
			}],
	        store: role_store,
	        title: '角色列表',
	        flex:1,
	        margin:5
	    },{
	        xtype: 'grid',
	        valueField: 'id',
	        columns:[{
	        	text: '数据',  dataIndex: 'serviceText', width:'50%'
			},{
	        	text: '权限',  dataIndex: 'permission', width:'40%',
	        	renderer: function(value,metaData,record,rowIndex,colIndex,store){
	        		return	'<input type="radio" id="radio_1_'+rowIndex+'" value="1" onclick=radioCheck(1,'+rowIndex+') '+(value==1?'checked="checked"':'')+'">个人</input>'+
	        				'<input type="radio" id="radio_2_'+rowIndex+'" value="2" onclick=radioCheck(2,'+rowIndex+') '+(value==2?'checked="checked"':'')+'">全部</input>';
	            }
			}],
	        store: service_store,
	        title: '功能列表',
	        flex:2,
	        margin: 5
	    }]
	});
	
	var button_panel = Ext.create('Ext.Panel',{
		region: 'south',
		style:'text-align:right',
		border: 0,
    	items:[{
    		xtype: 'button',
    		text:'确定',
    		width:120,
    		height:40,
    		handler: function() {
    			Ext.each(service_store.getRange(),function(record, index) {
    				Ext.Ajax.request({
        				url:'../service/service1_updateservice',
        				params: {
        					'rsid':record.data.rsid,
        					'roleid': m_role.getSelection()[0].data.id,
        					'serviceid':record.data.serviceId,
        					'permission':(Ext.getDom('radio_1_'+index).checked?1:2)
        					},
        				failure:function(form, action) {
        					Ext.Msg.alert('提示', '提交过程可能出现一些错误，请刷新查看结果');
        				}
        			});
    			});
    			Ext.Msg.alert('提示', '处理完成');
    		}
    	}]
	})

	Ext.create('Ext.Panel', {
		height: 500,
		defaults: {
            split: false,
            collapsible: false
        },
	
		layout: {
            type: 'border',
            padding: 5
        },
        renderTo: 'sysservicemng',
        items:[main_panel,button_panel]
	});
});
</script>
</head>
<body>
<div id="sysservicemng"></div>
</body>
</html>